<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar bg-white">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="28" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="28" color="#333333"></uni-icons>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar bg-white">
      <text class="text-lg font-medium">订单</text>
    </view>
    
    <!-- 标签页切换 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'current' }" 
        @tap="switchTab('current')"
      >
        当前订单
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'all' }" 
        @tap="switchTab('all')"
      >
        全部订单
      </view>
    </view>
    
    <!-- 订单为空时的提示 -->
    <view v-if="!displayOrders.length" class="empty-order">
      <uni-icons type="list" size="120" color="#CCCCCC"></uni-icons>
      <text class="empty-text">{{ activeTab === 'current' ? '暂无当前订单' : '暂无历史订单' }}</text>
      <button class="go-menu-btn" @tap="goToMenu">去点餐</button>
    </view>

    <!-- 订单列表 -->
    <block v-else>
      <scroll-view 
        scroll-y 
        :class="['order-list', {'has-payment-bar': activeTab === 'current' && displayOrders.length > 0}]"
      >
        <!-- 当前订单 -->
        <current-order 
          v-if="activeTab === 'current'"
          :order="displayOrders[0]"
          @update:order="updateOrder"
          @show-detail="showOrderDetail"
        />
        
        <!-- 全部订单 -->
        <all-orders
          v-else
          :orders="displayOrders"
          @show-detail="showOrderDetail"
          @reorder="reorderDishes"
          @review="reviewOrder"
        />
      </scroll-view>
      
      <!-- 底部支付按钮 -->
      <view v-if="activeTab === 'current' && displayOrders.length > 0" class="payment-bar">
        <view class="payment-info">
          <text class="payment-total">合计: ¥{{ finalPrice }}</text>
        </view>
        <view class="payment-action" @tap="payOrder(displayOrders[0])">
          <text>立即支付</text>
        </view>
      </view>
    </block>
    
    <!-- 支付方式选择弹窗 -->
    <uni-popup ref="paymentPopupRef" type="bottom" :safe-area="false">
      <view class="payment-popup">
        <view class="payment-popup-header">
          <text class="payment-popup-title">选择支付方式</text>
          <uni-icons type="close" size="24" color="#666666" @click="closePaymentPopup"></uni-icons>
        </view>
        <view class="payment-methods-list">
          <view 
            class="payment-method-item" 
            v-for="(method, index) in paymentMethods" 
            :key="index"
            :class="{ active: selectedPaymentMethod === index }"
            @tap="selectAndConfirmPaymentMethod(index)"
          >
            <view class="payment-method-info">
              <text class="payment-method-name">{{ method.name }}</text>
            </view>
            <uni-icons v-if="selectedPaymentMethod === index" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 优惠券选择弹窗 -->
    <uni-popup ref="couponPopupRef" type="bottom" :safe-area="false">
      <view class="payment-popup">
        <view class="payment-popup-header">
          <text class="payment-popup-title">选择优惠券</text>
          <uni-icons type="close" size="24" color="#666666" @click="closeCouponPopup"></uni-icons>
        </view>
        <view class="payment-methods-list">
          <view 
            class="payment-method-item" 
            :class="{ active: selectedCouponIndex === -1 }"
            @tap="selectAndConfirmCoupon(-1)"
          >
            <view class="payment-method-info">
              <text class="payment-method-name">不使用优惠券</text>
            </view>
            <uni-icons v-if="selectedCouponIndex === -1" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
          </view>
          <view 
            class="payment-method-item" 
            v-for="(coupon, index) in coupons" 
            :key="index"
            :class="{ active: selectedCouponIndex === index }"
            @tap="selectAndConfirmCoupon(index)"
          >
            <view class="payment-method-info">
              <text class="payment-method-name">{{ coupon.name }}</text>
            </view>
            <uni-icons v-if="selectedCouponIndex === index" type="checkbox-filled" size="20" color="#3db87f"></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import CurrentOrder from '@/components/CurrentOrder.vue';
import AllOrders from '@/components/AllOrders.vue';

// 订单数据
const orders = ref<any[]>([]);
// 当前活动的标签页
const activeTab = ref('current');
// 备注文本
const remarkText = ref('');
// 支付方式弹窗引用
const paymentPopupRef = ref<any>(null);
// 选中的支付方式
const selectedPaymentMethod = ref(0);
// 支付方式列表
const paymentMethods = [
  {
    name: '微信支付',
    icon: 'https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/38148bf503e7494cbf4a4e1c4115bc03.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850697&x-signature=ciyEP%2BdtyeM2IO6dhTfJUdxboyw%3D'
  },
  {
    name: '支付宝支付',
    icon: 'https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/31e44832a9c645df913ec4299773a51a.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850158&x-signature=J52YknSQKiBo2bPtj6kedWUQkK8%3D'
  }
];

// 优惠券弹窗引用
const couponPopupRef = ref<any>(null);
// 选中的优惠券索引
const selectedCouponIndex = ref(-1); // -1 表示不使用优惠券
// 优惠券列表
const coupons = [
  {
    id: 1,
    name: '满100减10元',
    discount: 10,
    minAmount: 100
  },
  {
    id: 2,
    name: '满200减30元',
    discount: 30,
    minAmount: 200
  },
  {
    id: 3,
    name: '满300减50元',
    discount: 50,
    minAmount: 300
  }
];

// 选中的优惠券
const selectedCoupon = computed(() => {
  if (selectedCouponIndex.value === -1) {
    return null;
  }
  return coupons[selectedCouponIndex.value];
});

// 计算最终价格（应用优惠券后）
const finalPrice = computed(() => {
  if (!displayOrders.value.length) return 0;
  
  const originalPrice = parseFloat(displayOrders.value[0].totalPrice);
  
  if (!selectedCoupon.value) return originalPrice.toFixed(2);
  
  // 检查是否满足优惠券使用条件
  if (originalPrice >= selectedCoupon.value.minAmount) {
    return (originalPrice - selectedCoupon.value.discount).toFixed(2);
  }
  
  return originalPrice.toFixed(2);
});

// 获取进度状态文本
const getProgressStatus = (status: string) => {
  switch (status) {
    case '待支付':
      return '进行中';
    case '已接单':
      return '进行中';
    case '准备中':
      return '进行中';
    case '已完成':
      return '已完成';
    case '已取消':
      return '已取消';
    default:
      return '进行中';
  }
};

// 判断步骤是否激活
const isStepActive = (step: string, currentStatus: string) => {
  const statusOrder = ['待支付', '已支付', '已接单', '准备中', '已完成'];
  const stepIndex = statusOrder.indexOf(step);
  const currentIndex = statusOrder.indexOf(currentStatus);
  
  return stepIndex === currentIndex;
};

// 判断步骤是否已完成
const isStepCompleted = (step: string, currentStatus: string) => {
  const statusOrder = ['待支付', '已支付', '已接单', '准备中', '已完成'];
  const stepIndex = statusOrder.indexOf(step);
  const currentIndex = statusOrder.indexOf(currentStatus);
  
  return stepIndex < currentIndex;
};

// 页面显示时更新订单数据
onShow(() => {
  loadOrderData();
});

// 加载订单数据
const loadOrderData = () => {
  try {
    // 从本地存储加载订单数据
    const storedOrders = uni.getStorageSync('orders') || [];
    
    // 如果没有订单数据，添加一些示例数据
    if (storedOrders.length === 0) {
      storedOrders.push(
        {
          orderNumber: '2023112000001',
          status: '待支付',
          orderTime: '2023-11-20 20:15',
          totalPrice: 217.8,
          remark: '无',
          isCurrent: true,
          dishes: [
            {
              id: 1,
              name: '北京烤鸭',
              price: 198,
              quantity: 1,
              image: 'https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/31e44832a9c645df913ec4299773a51a.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850158&x-signature=J52YknSQKiBo2bPtj6kedWUQkK8%3D'
            }
          ]
        },
        {
          orderNumber: '2023111900002',
          status: '已完成',
          orderTime: '2023-11-19 18:30',
          totalPrice: 336,
          remark: '少放辣',
          isCurrent: true,
          dishes: [
            {
              id: 2,
              name: '麻婆豆腐',
              price: 48,
              quantity: 1,
              image: 'https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/38148bf503e7494cbf4a4e1c4115bc03.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850697&x-signature=ciyEP%2BdtyeM2IO6dhTfJUdxboyw%3D'
            },
            {
              id: 4,
              name: '海鲜火锅',
              price: 288,
              quantity: 1,
              image: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?w=120&q=80'
            }
          ]
        }
      );
      uni.setStorageSync('orders', storedOrders);
    }
    
    orders.value = storedOrders;
    
    // 如果有待支付订单，加载其备注
    const pendingOrder = orders.value.find(order => order.status === '待支付');
    if (pendingOrder) {
      remarkText.value = pendingOrder.remark || '';
    }
  } catch (error) {
    console.error('加载订单数据失败:', error);
    orders.value = [];
  }
};

// 切换标签页
const switchTab = (tab: string) => {
  activeTab.value = tab;
};

// 根据当前标签页过滤订单
const displayOrders = computed(() => {
  if (activeTab.value === 'current') {
    // 只显示状态为"待支付"的订单
    return orders.value.filter(order => order.status === '待支付');
  } else {
    return orders.value;
  }
});

// 更新订单备注
const updateRemark = () => {
  if (displayOrders.value.length > 0) {
    const index = orders.value.findIndex(o => o.orderNumber === displayOrders.value[0].orderNumber);
    if (index !== -1) {
      orders.value[index].remark = remarkText.value;
      // 更新本地存储
      uni.setStorageSync('orders', orders.value);
    }
  }
};

// 打开支付方式选择弹窗
const openPaymentPopup = () => {
  paymentPopupRef.value.open();
};

// 关闭支付方式选择弹窗
const closePaymentPopup = () => {
  paymentPopupRef.value.close();
};

// 选择支付方式
const selectPaymentMethod = (index: number) => {
  selectedPaymentMethod.value = index;
};

// 确认支付方式
const confirmPaymentMethod = () => {
  closePaymentPopup();
};

// 选择并确认支付方式
const selectAndConfirmPaymentMethod = (index: number) => {
  selectedPaymentMethod.value = index;
  closePaymentPopup();
};

// 打开优惠券选择弹窗
const openCouponPopup = () => {
  couponPopupRef.value.open();
};

// 关闭优惠券选择弹窗
const closeCouponPopup = () => {
  couponPopupRef.value.close();
};

// 选择并确认优惠券
const selectAndConfirmCoupon = (index: number) => {
  selectedCouponIndex.value = index;
  
  // 更新订单显示的价格（仅用于显示，不修改原始价格）
  if (displayOrders.value.length > 0) {
    const orderIndex = orders.value.findIndex(o => o.orderNumber === displayOrders.value[0].orderNumber);
    if (orderIndex !== -1) {
      // 保存选择的优惠券到订单中
      orders.value[orderIndex].selectedCouponIndex = index;
      // 更新本地存储
      uni.setStorageSync('orders', orders.value);
    }
  }
  
  closeCouponPopup();
};

// 获取订单状态对应的样式类
const getStatusClass = (status: string) => {
  switch (status) {
    case '待支付':
      return 'status-pending';
    case '已支付':
      return 'status-paid';
    case '已完成':
      return 'status-completed';
    case '已取消':
      return 'status-canceled';
    default:
      return '';
  }
};

// 显示订单详情
const showOrderDetail = (order: any) => {
  uni.navigateTo({
    url: '/pages/order/detail',
    success: (res) => {
      res.eventChannel.emit('orderDetail', order);
    }
  });
};

// 支付订单
const payOrder = (order: any) => {
  uni.showLoading({
    title: '正在支付'
  });
  
  // 模拟支付过程
  setTimeout(() => {
    uni.hideLoading();
    
    // 更新订单状态
    const index = orders.value.findIndex(o => o.orderNumber === order.orderNumber);
    if (index !== -1) {
      orders.value[index].status = '已完成';
      orders.value[index].isCurrent = false; // 支付后不再是当前订单
      
      // 更新本地存储
      uni.setStorageSync('orders', orders.value);
      
      // 支付成功后清空购物车
      uni.setStorageSync('cartItems', []);
    }
    
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });
  }, 1500);
};

// 跳转到菜单页
const goToMenu = () => {
  uni.switchTab({
    url: '/pages/menu/index'
  });
};

// 更新订单
const updateOrder = (updatedOrder: any) => {
  const index = orders.value.findIndex(o => o.orderNumber === updatedOrder.orderNumber);
  if (index !== -1) {
    orders.value[index] = updatedOrder;
  }
};

// 再次下单
const reorderDishes = (order: any) => {
  // 将订单中的菜品添加到购物车
  const cartItems = uni.getStorageSync('cartItems') || [];
  
  // 合并已有的购物车项目和新添加的项目
  const newCartItems = [...cartItems];
  
  // 添加订单中的菜品到购物车
  order.dishes.forEach((dish: any) => {
    const existingIndex = newCartItems.findIndex((item: any) => item.id === dish.id);
    
    if (existingIndex !== -1) {
      // 如果已存在,增加数量
      newCartItems[existingIndex].quantity += dish.quantity;
    } else {
      // 如果不存在,添加新项目
      newCartItems.push({...dish});
    }
  });
  
  // 保存到本地存储
  uni.setStorageSync('cartItems', newCartItems);
  
  // 提示用户
  uni.showToast({
    title: '已添加到购物车',
    icon: 'success'
  });
  
  // 跳转到菜单页
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/menu/index'
    });
  }, 1500);
};

// 评价订单
const reviewOrder = (order: any) => {
  uni.showToast({
    title: '评价功能开发中',
    icon: 'none'
  });
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.status-bar {
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16rpx;
  box-sizing: border-box;
}

.bg-white {
  background-color: #ffffff;
}

.nav-bar {
  height: 90rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 标签页样式 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: vars.$primary-color;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: vars.$primary-color;
  border-radius: 2rpx;
}

.empty-order {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin: 20rpx 0 40rpx;
}

.go-menu-btn {
  background-color: #07C160;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 60rpx;
  border-radius: 100rpx;
  border: none;
}

.order-list {
  height: calc(100vh - 270rpx);
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
  padding-top: 20rpx; /* 默认顶部内边距 */
}

/* 有底部支付栏时的滚动区域样式 */
.order-list.has-payment-bar {
  height: calc(100vh - 270rpx); /* 减去支付栏高度 */
  padding-bottom: 120rpx; /* 为支付栏预留空间 */
  padding-top: 0; /* 减少顶部内边距，让内容位置更高 */
}

/* 订单卡片样式 */
.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.order-title {
  display: flex;
  align-items: center;
}

.order-title-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

.order-content {
  padding: 20rpx;
}

.order-dishes-list {
  margin-bottom: 20rpx;
}

.order-dish-item {
  display: flex;
  padding: 16rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.order-dish-item:last-child {
  border-bottom: none;
}

.dish-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.dish-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dish-name-count {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.dish-name {
  font-size: 28rpx;
  font-weight: 500;
}

.dish-count {
  font-size: 26rpx;
  color: #666;
}

.dish-price {
  font-size: 26rpx;
  color: #3db87f;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-price {
  font-size: 30rpx;
  font-weight: 500;
  color: #3db87f;
}

.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-remark {
  display: flex;
  align-items: center;
}

.remark-label {
  font-size: 24rpx;
  color: #666;
  margin-right: 8rpx;
}

.remark-content {
  font-size: 24rpx;
  color: #999;
}

/* 底部支付栏样式 */
.payment-bar {
  position: fixed;
  left: 20rpx;
  right: 20rpx;
  bottom: 20rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  z-index: 90;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  border-radius: 48rpx;
  overflow: visible;
}

.payment-info {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.payment-total {
  color: #3db87f;
  font-size: 30rpx;
  font-weight: 500;
}

.payment-action {
  width: 200rpx;
  height: 100%;
  background-color: #3db87f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 0 48rpx 48rpx 0;
}

/* 备注卡片样式 */
.remark-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.remark-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 16rpx;
}

.remark-card-title {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

.remark-input {
  width: 100%;
  height: 120rpx;
  font-size: 26rpx;
  color: #333;
  background-color: transparent;
  border-radius: 8rpx;
  padding: 0;
  box-sizing: border-box;
  border: none;
}

/* 支付方式卡片样式 */
.payment-method-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.payment-method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-method-title {
  display: flex;
  align-items: center;
}

.payment-method-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

.payment-method-selected {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
}

/* 支付方式弹窗样式 */
.payment-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
}

.payment-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.payment-popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.payment-methods-list {
  margin-bottom: 20rpx;
}

.payment-method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.payment-method-item:last-child {
  border-bottom: none;
}

.payment-method-info {
  display: flex;
  align-items: center;
}

.payment-method-name {
  font-size: 30rpx;
  color: #333;
}

.payment-method-item.active {
  background-color: #f9f9f9;
}

/* 优惠券选择样式 */
.order-coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-top: 1px solid #f5f5f5;
  margin-bottom: 16rpx;
}

.coupon-label {
  font-size: 26rpx;
  color: #666;
}

.coupon-value {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #3db87f;
}

/* 进度卡片样式 */
.progress-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.progress-title {
  display: flex;
  align-items: center;
}

.progress-title-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

.progress-status {
  font-size: 26rpx;
  color: #ffffff;
  background-color: #3db87f;
  padding: 4rpx 16rpx;
  border-radius: 100rpx;
}

.progress-order-number {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  overflow-x: auto;
  padding-bottom: 10rpx;
}

.progress-step {
  min-width: 120rpx;
  margin-right: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.progress-step:last-child {
  margin-right: 0;
}

.step-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  font-size: 24rpx;
  color: #999;
  z-index: 2;
}

.progress-step.active .step-icon {
  background-color: #3db87f;
  color: #fff;
}

.progress-step.completed .step-icon {
  background-color: #3db87f;
  color: #fff;
}

.step-line {
  position: absolute;
  top: 24rpx;
  left: 50%;
  width: 100%;
  height: 2rpx;
  background-color: #f5f5f5;
  z-index: 1;
}

.progress-step:first-child .step-line {
  left: 50%;
  width: 50%;
}

.progress-step:last-child .step-line {
  width: 50%;
  right: 50%;
  left: auto;
}

.progress-step.active .step-line,
.progress-step.completed .step-line {
  background-color: vars.$primary-color;
}

.step-text {
  font-size: 24rpx;
  color: #999;
}

.progress-step.active .step-text,
.progress-step.completed .step-text {
  color: vars.$primary-color;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1px solid #f5f5f5;
}

.progress-info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
</style>